<template>
  <!-- 内容 -->
  <div class="main">
    <div class="container">
      <!-- 选项 -->
      <div class="position-relative">
        <ul class="nav nav-tabs">
          <li class="nav-item">
            <router-link class="nav-link" :to="'/profile/' + id">个人信息</router-link>
          </li>
          <li class="nav-item">
            <router-link class="nav-link" :to="'/profile/' + id + '/post'">我的帖子</router-link>
          </li>
          <li class="nav-item">
            <router-link class="nav-link active" :to="'/profile/' + id + '/reply'">我的回复</router-link>
          </li>
        </ul>
        <router-link class="text-muted position-absolute rt-0" :to="'/profile/' + id">返回个人主页&gt;</router-link>
      </div>
      <!-- 我的回复 -->
      <div class="mt-4">
        <h6><b class="square"></b> 回复的帖子({{ total }})</h6>
        <ul class="list-unstyled mt-4 pl-3 pr-3">
          <li class="border-bottom pb-3 mt-4" v-for="reply in replies" :key="reply.comment.id">
            <div class="font-size-16 text-info">
              <router-link :to="'/discuss/detail/' + reply.post.id" class="text-info">{{ reply.post.title }}</router-link>
            </div>
            <div class="mt-1 font-size-14">
              {{ reply.comment.content }}
            </div>
            <div class="text-right font-size-12 text-muted">
              回复于 <b>{{ reply.comment.createTime }}</b>
            </div>
          </li>
        </ul>
        <!-- 分页 -->
        <div class="mt-5" v-if="replies.length > 0">
          <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="pageSizes"
          :small="small"
          :disabled="disabled"
          :background="background"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import Comment from '@/api/comment'

const route = useRoute()

const id = ref(0)

const replies = ref([])

const small = ref(false)
const background = ref(false)
const disabled = ref(false)

const total = ref(10)
const pageSizes = ref([10, 20, 50, 100])
const currentPage = ref(1)
const pageSize = ref(10)

onMounted(async () => {
  // 用户id
  id.value = route.params.id
  getCommentsByUser()
})

const getTotal = async () => {
  Comment.getCommentCountByUser(id.value).then(res => {
    total.value = res
  })
}

const getCommentsByUser = async () => {
  Comment.getCommentsByUser(id.value, currentPage.value, pageSize.value)
  .then(res => {
    getTotal()
    replies.value = res
  })
}

const handleSizeChange = async () => {
  getCommentsByUser()
}

const handleCurrentChange = async () => {
  getDiscussPostsByUser()
}

</script>
